import React, { FC, useEffect } from "react";
import { useNavigate, Link } from "react-router-dom";
import { Button, Typography } from "antd";
import { MANAGE_INDEX_PATHNAME } from "../router";
import styles from "./Home.module.scss";
import axios from "axios";

// import "../_mock";

const { Title, Paragraph } = Typography;

const Home: FC = () => {
  const nav = useNavigate();
  // function clickHandler() {
  //   nav({
  //     pathname: "/login",
  //     search: "b=21",
  //   });
  // }
  // 在React18 开发环境会执行两次
  useEffect(() => {
    // fetch("/api/test")
    //   .then((res) => res.json())
    //   .then((data) => {
    //     console.log(data);
    //   });
    // mock.js 只能劫持XMLHttpRequest ，不能劫持fetch
    // axios 是用XMLHttpRequest 封装的，可以被mock。js截持到
    // axios.get("/api/test").then((res) => {
    //   console.log(res.data);
    // });
  }, []);

  useEffect(() => {
    // http://localhost:3001/api/test
    //3000
    // node 在3001 前端在3000  会出现跨域
    // craco
    // fetch("/api/test")
    //   .then((res) => res.json())
    //   .then((data) => console.log(data));
    // axios.get("/api/test").then((res) => console.log(res.data));
  });

  return (
    <div className={styles.container}>
      <div className={styles.info}>
        <Title>问卷调查 | 在线投票</Title>
        <Paragraph>
          已累计创建问卷 100 份，发布问卷 90 份， 收到答卷 98 份
        </Paragraph>
        <div>
          <Button type="primary" onClick={() => nav(MANAGE_INDEX_PATHNAME)}>
            开始使用
          </Button>
        </div>
      </div>
    </div>
  );
};

export default Home;
